<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- v-on 完整用法 -->
      <button v-on:click="handleClick">按钮</button>
      <div
        style="width: 100px; height: 100px; background-color: hotpink"
        v-on:mousemove="handleMove"
      ></div>
      <input type="text" v-on:input="handleInput" />
      <!-- v-on 简写方式 -->
      <hr />
      <button @click="handleClick">按钮</button>
      <div
        style="width: 100px; height: 100px; background-color: hotpink"
        @mousemove="handleMove"
      ></div>
      <input type="text" @input="handleInput" />
      <hr />
      <!-- 给事件回调函数传递参数 -->
      <!-- 1. 直接写回调函数，参数：event -->
      <button @click="handleClick">按钮</button>
      <!-- 2. 写函数调用传参形式，参数：就是你传递参数 -->
      <div
        style="width: 100px; height: 100px; background-color: hotpink"
        @mousemove="handleMove(1, 'jack', false, { name: 'rose' })"
      ></div>
      <!-- 3. 如果需要event参数，需要传递 $event -->
      <input
        type="text"
        @input="handleInput(1, 'jack', false, { name: 'rose' }, $event)"
      />
      <hr />
      <p>{{ num }}</p>
      <button @click="updateNum">按钮1</button>
      <!-- 如果回调函数只有一条语句，可以直接写（省略this），不用定义函数 -->
      <button @click="num++">按钮2</button>
      <hr />
      <form>
        用户名：<input type="text" />
        <button type="submit" @click="login">登录</button>
      </form>
      <a href="http://www.atguigu.com" @click="link">尚硅谷</a>
      <hr />
      <form>
        用户名：<input type="text" />
        <button type="submit" @click.prevent="login">登录</button>
      </form>
      <a href="http://www.atguigu.com" @click.prevent="link">尚硅谷</a>
      <hr />
      <input type="text" @keyup="handleKeyUp" />
      <hr />
      <input type="text" @keyup.13="handleKeyUp" />
      <input type="text" @keyup.enter="handleKeyUp" />
    </div>
    <script src="./js/vue.js"></script>
    <script>
      /*
        绑定事件指令：v-on
          语法：v-on:事件名="事件回调函数" -> 简写：@事件名="事件回调函数"
            事件回调函数需要再methods中定义
          
          回调函数参数：
            1. 如果不需要参数或只需要event参数，直接写回调函数 @click="handler"
            2. 如果需要其他参数 @click="handler(1, 2, 3)"
            3. 如果需要其他参数和event参数 @click="handler($event, 1, 2, 3)"      
          
          事件修饰符
            .prevent 阻止默认行为
            .stop    阻止事件冒泡

          按键修饰符
            .keyCode  .13
            .keyName  .enter

      */
      const vm = new Vue({
        // new Vue传递的对象是配置对象，
        // 所谓配置对象：属性名固定的对象。写了准确的属性名能起到相应的作用，随便写的或写错了等于没写
        // 非函数数据定义在 data 中
        data: {
          // new Vue会进行数据代理。会将data中的数据、methods中的方法，拿到this上。（可以通过this使用）
          // 可以通过this直接访问data中数据和methods中方法（让访问数据更加简单）
          num: 0,
        },
        // 函数数据定义在 methods 中
        methods: {
          handleClick() {
            // arguments 函数接受到的所有参数
            console.log("hello 华哥", arguments);
          },
          handleMove() {
            console.log("move~~", arguments);
          },
          handleInput() {
            console.log("input", arguments);
          },
          updateNum() {
            // this指向实例对象
            // console.log(this);
            this.num++;
          },
          // updateNum: () => {
          //   // this指向window(不是我们想要的)
          //   console.log(this);
          // },
          login(e) {
            // e.preventDefault(); // 阻止默认行为
            console.log("login");
          },
          link(e) {
            // e.preventDefault(); // 阻止默认行为
          },
          handleKeyUp(e) {
            // if (e.keyCode === 13) {
            console.log("enter");
            // }
          },
        },
      });

      vm.$mount("#app");
    </script>
  </body>
</html>
